Add a clear search and filters action to the empty state#48
Conversation
When a search or category filter returns no loops, the empty state asks the visitor to broaden the search but offers no direct way to do it, leaving the only reset paths as manually clearing the input or hunting for the All category. Add a Clear search & filters button that resets the query and category to the default view, then returns focus to the search box so keyboard users can immediately type a new query.
|
Small UX follow-on: when a search or filter returns nothing, the empty state asks people to "broaden your search" but doesn't give them a way to do it. This adds a Clear search & filters button that resets to the default view and returns focus to the search box. I matched the existing pagination/control button styling (including |
mberman84
left a comment
mberman84
left a comment
There was a problem hiding this comment.
The reset behavior is correct in browser verification: it clears the query/category/page, restores the All chip's ARIA state, hides the empty state, and returns focus to search.
One deployment blocker remains: this changes both site/script.js and site/styles.css while pages still request the existing ?v=20260620-newest-first URLs. Cached visitors can receive the new button markup with old JavaScript/CSS, leaving the action inert or unstyled. Please bump the shared asset version across the homepage, Learn/Agents pages, generated loop pages, the page generator, and scripts/check.mjs, then regenerate affected pages.
Per review: the empty-state reset changes both site/script.js and site/styles.css, so cached visitors could load the new button markup with stale JavaScript/CSS, leaving it inert or unstyled. Bump both shared asset versions to 20260621-empty-state across the homepage, Learn/Agents pages, the loop-page generator, and scripts/check.mjs, then regenerate the loop pages.
|
Bumped both shared asset versions ( |
|
@mberman84 ready for re-review when convenient — both |
2 participants
Summary
When a search query or category filter matches no loops, the empty state reads:
…but offers no direct way to actually do that. The only ways back to the full catalog are manually clearing the search box or hunting for the All category chip — extra friction at exactly the dead-end moment.
This adds a Clear search & filters button to the empty state that:
is-active/aria-pressedstate),Changes
site/index.html— wrap the empty-state actions and add the reset button.site/script.js— wire the button to reset query + category and refocus search.site/styles.css— style the button to match the existing pagination/control buttons (including:focus-visible).Verification
node scripts/check.mjs→Loop Library checks passed.node --check site/script.jsbuild-skill-catalog,build-loop-pages,build-social-images) → no artifact drift.